<!--
 * @Author: zjj
 * @Date: 2019-11-29 10:33:50
 * @LastEditors: zjj
 * @LastEditTime: 2019-12-11 09:27:08
 -->
<!--  -->
<template>
  <div class="distribution">
    <Nav title="活动详情">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <div class="title-tip">累计收入(元)</div>
    <div class="account">{{distributionDetail.total_income}}</div>
    <div class="account-info flex">
      <div class="info-item">
        <div class="title">本月新增粉丝(人)</div>
        <div class="count">+{{distributionDetail.mon_fans}}</div>
      </div>
      <div class="info-item">
        <div class="title">本月收入(元)</div>
        <div class="count">+{{distributionDetail.mon_income}}</div>
      </div>
      <div class="info-item">
        <div class="title">累计粉丝数量(人)</div>
        <div class="count">+{{distributionDetail.total_fans}}</div>
      </div>
    </div>
    <div class="divide-line"></div>
    <!-- 搜索 -->
    <div class="search-wrapper flex justify-between aligin-center">
      <div class="search-bg flex aligin-center">
        <span class="search-icon"></span>
        <input
          class="search-input"
          :value="searchInput"
          placeholder="搜索名字"
          type="text"
          v-stream:input="search$"
        >
      </div>
      <span class="refresh" v-stream:click="refresh$"></span>
      <span class="wrapper flex aligin-center justify-center" @click="toFliter">
        <span class="categroies"></span>
      </span>
    </div>
    <div class="list-wrapper">
      <div class="title flex justify-between">
        <span class="ml-10">团队成员</span>
        <span class="ml-10">关系</span>
        <span>我的收益(元)</span>
        <span>下单次数</span>
      </div>
      <div class="scroll-wrapper">
        <Scroll
          :preventDefault="true"
          :click="true"
          :tap="true"
          :pullup="true"
          :pulldown="true"
          v-stream:scrollToEnd="scrollToEnd$"
          :data.sync="observabelRecordList"
          ref="myScroll"
        >
          <div>
            <template v-for="(item,index) in observabelRecordList">
              <div
                class="record-item flex justify-between aligin-center"
                :key="index"
                @click="toDetail(item)"
              >
                <span class="name ellipsis">{{item.nick_name}}</span>
                <span class="relation ellipsis">{{item.relation}}</span>
                <span class="flex-1">{{item.tp}}</span>
                <span class="flex-1">{{item.c}}</span>
                <span class="arrow-right"></span>
              </div>
            </template>
          </div>
        </Scroll>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import Scroll from "../../components/Scroll";
import page from "../../mixin/page";
import { inviteCount, inviteList, inviteSearch } from "../../api/api";
import { fromEvent, from, merge, empty, of, concat } from "rxjs";
import {
  map,
  filter,
  exhaustMap,
  debounceTime,
  switchMap,
  throttleTime,
  tap,
  concatMap
} from "rxjs/operators";
export default {
  mixins: [page],
  components: { Nav, Scroll },
  domStreams: ["scrollToEnd$", "refresh$", "search$"],
  subscriptions() {
    let subscribtion = this.initRxjs();
    return {
      observabelRecordList: subscribtion
    };
  },
  data() {
    return {
      distributionDetail: {},
      recordList: [],
      searchInput: ""
    };
  },
  computed: {
    c_order_pos(){
      if(this.$store.state.pos&&this.$store.state.order){
        return  this.$store.state.pos+"|"+this.$store.state.order
      }
      else if(this.$store.state.pos){
         return this.$store.state.pos
      }
      else if(this.$store.state.order){
        return this.$store.state.order
      }
    }
  },
  watch: {},
  methods: {
    initRxjs() {
      //初始化 活动事件
      let init = of(1).pipe(
        concatMap(() => inviteCount()),
        tap(({ data: { result } }) => {
          this.distributionDetail = result;
        })
      );
      let scrollEnd = this.scrollToEnd$.pipe(
        //判断是否还有数据未加载
        filter(this.noMoreData),
        //截流
        //判断是否搜索
        filter(()=>!this.searchInput),
        throttleTime(1000)
      );
      // 搜索
      let search = this.search$.pipe(
        tap(res => {
          this.current_page = 0;
          this.last_page = 1;
          this.recordList = [];
          this.searchInput = res.event.target.value;
        }),
        //防抖
        debounceTime(500)
      );
      //刷新事件
      let refresh = this.refresh$.pipe(
        tap(() => {
          this.$store.commit("changeOrder","")
          this.$store.commit("changePos","")
          this.searchInput = "";
          this.current_page = 0;
          this.last_page = 1;
          this.recordList = [];
        }),
        //防抖
        debounceTime(500)
      );
      return merge(init, scrollEnd, refresh, search).pipe(
        //替换
        switchMap(() =>
          inviteList({
            sort:this.c_order_pos,
            kw: this.searchInput,
            page: this.current_page + 1
          })
        ),
        map(this.exec)
      );
    },
    exec(res) {
      if (res.data.result && res.data.result.length != 0) {
        this.recordList = [...this.recordList, ...res.data.result];
        this.current_page += 1;
        this.last_page = this.current_page + 1;
      } else {
        this.last_page = this.current_page;
      }
      return this.recordList;
    },
    toDetail(item) {
      this.$router.push({
        name: "distributionDetail",
        params: { id: item.uid }
      });
    },
    _api() {},
    toFliter() {
      this.$router.push({ name: "fliter" });
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.distribution {
  height: 100%;
  .title-tip {
    margin-top: 26px;
    font-size: 11px;
    text-align: center;
    color: #999;
  }
  .account {
    margin-top: 15px;
    font-size: 20px;
    color: #d02432;
    text-align: center;
  }
  .account-info {
    margin-top: 39px;
    margin-bottom: 18px;
    text-align: center;
    .info-item {
      flex: 1;
      &:nth-child(n + 1) {
        border-left: 1px solid #eeeeee;
      }
      .title {
        font-size: 11px;
        color: #999;
      }
      .count {
        margin-top: 15px;
        font-size: 16px;
      }
    }
  }
  .search-wrapper {
    padding: 0 17px 0 23px;
    height: 55px;
    border-bottom: 1px solid #eeeeee;
    .search-bg {
      width: 270px;
      height: 26px;
      background: #cac8c8;
      opacity: 0.4;
      border-radius: 13px;
    }
    .search-icon {
      margin-left: 9px;
      height: 18px;
      width: 18px;
      background: url("../../assets/imgs/search@3x.png");
      background-size: 100% 100%;
    }
    .search-input {
      margin-left: 8px;
      margin-right: 8px;
      height: 100%;
      background: #cac8c8;
      color: #000;
      flex: 1;
    }
    .wrapper {
      height: 21px;
      width: 30px;
    }
    .refresh {
      height: 20px;
      width: 23px;
      background: url("../../assets/imgs/refresh-gray.png");
      background-size: 100% 100%;
      transition: all 0.3s ease;
      &:active {
        transform: rotate(180deg);
      }
    }
    .categroies {
      display: inline-block;
      height: 21px;
      width: 4px;
      background: url("../../assets/imgs/more-menu.png");
      background-size: 100% 100%;
    }
  }
  .list-wrapper {
    height: calc(100% - 284px);
    box-sizing: border-box;
    padding: 19px 0 13px 23px;
    .title {
      width: 309px;
      height: 11px;
      font-size: 11px;
      color: #999999;
    }
    .scroll-wrapper {
      margin-top: 4px;
      height: calc(100% - 15px);
      overflow: hidden;
      .record-item {
        font-size: 11px;
        line-height: 14px;
        text-align: center;
        height: 35px;
        padding-right: 16px;
        border-bottom: 1px solid #eeeeee;
      }
      .name {
        width: 77px;
        flex-shrink: 0;
        height: 14px;
      }
      .relation {
        width: 77px;
        flex-shrink: 0;
        height: 14px;
      }
      .flex-1 {
        flex: 1;
      }
      .arrow-right {
        height: 10px;
        width: 10px;
        background: url("../../assets/imgs/arrow-right-b@3x.png");
        background-size: 100% 100%;
      }
    }
  }
}
</style>